<template>
  <div class="content">
    <div style="padding: 20px 0 0 20px">
      <a-space>
        <a-button type="primary" style="color: #fff" icon="plus-circle" @click="showModal(null)">添加</a-button>
      </a-space>
    </div>
    <div style="padding: 20px">
      <a-table :data-source="table.list" class="tableStyle">
        <a-table-column key="groupName" title="分组名" data-index="groupName" />
        <a-table-column key="ctime" title="创建时间" data-index="ctime" />
        <a-table-column key="select" title="操作">
          <template slot-scope="record">
            <a-button type="link" @click="showModal(record)"><a-icon type="edit" /></a-button>
            <a-popconfirm
              title="您确定要删除此分组吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm(record)"
              @cancel="cancel"
            >
              <a-button type="link"><a-icon type="delete" /></a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </a-table>
    </div>
    <a-modal title="新增分组" :visible="visible" :confirm-loading="confirmLoading" @cancel="handleCancel">
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row>
          <a-col :span="24">
            <a-form-item label="分组名">
              <a-input v-model="modalData.groupName" placeholder="" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <template slot="footer">
        <div style="text-align: center; padding-bottom: 50px">
          <a-button
            style="background-color: #b38c01; color: #fff"
            key="submit"
            type="primary"
            @click="handleCancel"
            icon="reload"
          >
            取消
          </a-button>
          <a-button key="back" type="primary" @click="handleOk" icon="diff"> 保存 </a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
// import Vue from 'vue'
import { addGrouping, getSmsGroupList } from '@/api/SMSRelated'
export default {
  name: 'SMSAudit',
  data() {
    return {
      expand: false,
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      table: {
        list: [],
      },
      visible: false,
      confirmLoading: false,

      userInfo: {},
      modalData: {
        id: 0,
        groupName: '',
      },
      type: 1,
    }
  },
  computed: {
    count() {
      return this.expand ? 11 : 7
    },
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
    console.log(this.userInfo)

    this.getGroupingList()
  },
  methods: {
    getGroupingList() {
      getSmsGroupList({ type: 1, userId: this.userInfo.id }).then((data) => {
        if (data.success) {
          this.table.list = data.result
        }
      })
    },

    showModal(e) {
      if (e != null) {
        this.type = 2
        this.modalData = e
      } else {
        this.type = 1
      }
      this.visible = true
    },

    handleOk(e) {
      this.confirmLoading = true
      if (this.modalData.id == 0) {
        addGrouping({
          type: 1,
          userId: this.userInfo.id,
          groupName: this.modalData.groupName,
        }).then((data) => {
          this.confirmLoading = false
          if (data.success) {
            this.$message.success(`${this.modalData.groupName}分组添加成功！`)
            this.getGroupingList()
          }
        })
      }else{
        addGrouping({
          type: 2,
          groupId: this.modalData.id,
          groupName: this.modalData.groupName,
        }).then((data) => {
          this.confirmLoading = false
          if (data.success) {
            this.$message.success(`${this.modalData.groupName}分组修改成功！`)
            this.getGroupingList()
          }
        })
        
      }
      this.visible = false
    },

    handleCancel() {
      this.visible = false
    },

    confirm(e) {
      addGrouping({type:3,groupId:e.id}).then((data) => {
          this.confirmLoading = false
          if (data.success) {
            this.$message.success('该分组删除成功！')
            this.getGroupingList()
          }
        })
    },
    cancel(e) {
      this.$message.error('您已取消删除！')
    },
  },
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #01232c !important;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>